import React, { useState } from 'react';
import { Search, Badge } from 'react-vant';
import { ChatO, Search as SearchIcon } from '@react-vant/icons';
import './index.css';

interface SearchBarProps {
  placeholder?: string;
  onSearch?: (value: string) => void;
}

export default function SearchBar({ 
  placeholder = '搜索商品...',
  onSearch
}: SearchBarProps) {
  const [value, setValue] = useState('');

  return (
    <div className="search-bar-container">
      <div className="search-input-container">
        <Search
          value={value}
          onChange={setValue}
          placeholder={placeholder}
          shape="round"
          background="transparent"
          leftIcon={<SearchIcon style={{fontSize:'20px'}}/>}
          rightIcon={value && <span className="clear-icon" onClick={() => setValue('')}>×</span>}
          onSearch={onSearch}
        />
      </div>
     <div className='chat-icon-container'>
        <Badge content='99+'>
          <ChatO style={{fontSize:'30px',color:'white'}} />
        </Badge>
     </div>
    </div>
  );
}
